extends tpl/basic.pug
append vars
  - var title ="案例"
append style
  link(rel="stylesheet", href="style/netletter.css")
  link(rel="stylesheet", href="lib/swiper.min.css")
block page
  .top-header
    .nimp
    .background
      .title 项目背景
      .en-title BACKGROUND
      .cont 2014年2月27日，中央网络安全和信息化领导小组成立。该领导小组将着眼国家安全和长远发展，统筹协调涉及经济、政治、文化、社会及军事等各个领域的网络安全和信息化重大问题，研究制定网络安全和信息化发展战略、宏观规划和重大政策，推动国家网络安全和信息化法治建设，不断增强安全保障能力。飓风UCD为网信办着手打造监控平台，主要包括全国信息分析、内容分析、信息指数、最新消息、渠道对比等几个功能模块。
    .bg
  .design-ideas
    .head
      img(src="image/netletter/num1.png")
      .text
        .title 设计思路
        .sub-title INTERACTION DESIGN
    .cont 网信办大屏项目时间紧任务重，当今世界，信息技术革命日新月异，对国际政治、经济、文化、社会、军事等领域发展产生了深刻影响。信息化和经济全球化相互促进，互联网已经融入社会生活方方面面，深刻改变了人们的生产和生活方式。我国正处在这个大潮之中，受到的影响越来越深。我国互联网和信息化工作取得了显著发展成就，网络走入千家万户，网民数量世界第一，我国已成为网络大国。同时也要看到，我们在自主创新方面还相对落后，区域和城乡差异比较明显，特别是人均带宽与国际先进水平差距较大，国内互联网发展瓶颈仍然较为突出。当今世界，信息技术革命日新月异，对国际政治、经济、文化、社会、军事等领域发展产生了深刻影响。信息化和经济全球化相互促进，互联网已经融入社会生活方方面面，深刻改变了人们的生产和生活方式。我国正处在这个大潮之中，受到的影响越来越深。我国互联网和信息化工作取得了显著发展成就，网络走入千家万户，网民数量世界第一，我国已成为网络大国。同时也要看到，我们在自主创新方面还相对落后，区域和城乡差异比较明显，特别是人均带宽与国际先进水平差距较大，国内互联网发展瓶颈仍然较为突出。
  .prototype-design
    .head
      img(src="image/netletter/num2.png")
      .text
        .title 原型设计
        .sub-title INTERACTION
    .cont 多屏拼控，显示内容自由布局组合结合二三维地理信息系统，将三维虚拟场景和图表等信息同屏显示，将大屏分为不同的功能区并行控制，让大屏交互更轻松，网络安全态势全方位呈现。
    img(src="./image/netletter/layout.png")
  .interaction
    .inner
      .head
        img(src="image/netletter/num3.png")
        .text
          .title 界面方案
          .sub-title INTERACTION DESIGN
      .cont 计师经过对设计对象的分析设计后，根据用户的使用情境量身定制一个适用的人机交互方案，包括功能流程设计、运行监测模式设计以及可视化决策主体页面设计等，为客户提供功能全面、实施快捷的解决方案。同时，我们试图在此基础上，帮助客户从更多新视角对核心业务作出更深层次的审视与理解。
    img(src="image/netletter/interaction.png")
  .show-detail
    .inner
      .head
        img(src="image/netletter/num4.png")
        .text
          .title 细节展示
          .sub-title INTERACTION DESIGN
      .cont 图表设计认为对于普通人来说，这里的意义在于「我们要知道图表的美观，很多时会基于数据本身的情况」。我们在网上会看到很多好看的数据图表模板，但那很可能不适合你的情况。我们针对项目精心设计了动态图表界面，所做项目对「数据可视化」要求又高，那你肯定了解设计挑战的极度困难性t。
    img(src="image/netletter/chart.png", alt="")
  .link
    a(href="./casehuiauto.html") 上一个案例
    a(href="./medicalcase.html") 下一个案例
  +slide()
  append script
    script(src="lib/swiper.min.js")



